<template>
  <div>
    <h2>左边</h2>
    <draggable
      v-model="leftList"
      :clone="cloneElement"
      :group="{ name: 'elements', pull: 'clone', put: false }"
      class="left"
      item-key="id"
      :sort="false"
    >
      <template #item="{ element }">
        <div>{{ element.name }}</div>
      </template>
    </draggable>

    <h2>右边</h2>
    <draggable v-model="rightList" group="elements" class="right" item-key="id">
      <template #item="{ element }">
        <div>{{ element.name }}</div>
      </template>
    </draggable>
  </div>
</template>

<script setup>
import { ref } from "vue";
import draggable from "vuedraggable";

let leftList = [
  { id: 1, name: "元素1" },
  { id: 2, name: "元素2" },
  { id: 3, name: "元素3" },
];
let rightList = ref([]);

let cloneElement = (element) => {
  return {
    ...element,
    id: Date.now(), // 使用时间戳来确保唯一性
  };
};
</script>

<style>
.left,
.right {
  display: inline-block;
  border: 1px solid #ccc;
  padding: 10px;
  margin: 10px;
  width: 200px;
  height: 300px;
}
</style>
